<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Traffic | Dashboard</title>
  <% String root  = request.getContextPath(); %>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
 <link rel="stylesheet" href="bower_components/fontawesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="bower_components/ionicons/css/ionicons.min.css">

<!-- Theme style -->
<link rel="stylesheet" href="static/scripts/AdminLTE2/dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
     folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="static/scripts/AdminLTE2/dist/css/skins/_all-skins.min.css">

<link href="bower_components/dhtmlx/dhtmlx.css" rel="stylesheet" >

<script src="bower_components/dhtmlx/dhtmlx.js"></script>
</head>
<body onload="doOnLoad()">
<script type="text/javascript">
	data={
		rows:[
			{ id:1001,
		 data:[
			  "100",
			  "A Time to Kill",
			  "John Grisham",
			  "12.99",
			  "1",
			  "05/01/1998"] },
		   { id:1002,
		 data:[
			  "1000",
			  "Blood and Smoke",
			  "Stephen King",
			  "0",
			  "1",
			  "01/01/2000"] },
		   { id:1003,
		 data:[
			  "-200",
			  "The Rainmaker",
			  "John Grisham",
			  "7.99",
			  "0",
			  "12/01/2001"] },
		   { id:1004,
		 data:[
			  "350",
			  "The Green Mile",
			  "Stephen King",
			  "11.10",
			  "1",
			  "01/01/1992"] },
		   { id:1005,
		 data:[
			  "700",
			  "Misery",
			  "Stephen King",
			  "7.70",
			  "0",
			  "01/01/2003"] },
		   { id:1006,
		 data:[
			  "-1200",
			  "The Dark Half",
			  "Stephen King",
			  "0",
			  "0",
			  "10/30/1999"] },
		   { id:1007,
		 data:[
			  "1500",
			  "The Partner",
			  "John Grisham",
			  "12.99",
			  "1",
			  "01/01/2005"] },
		   { id:1008,
		 data:[
			  "500",
			  "It",
			  "Stephen King",
			  "9.70",
			  "0",
			  "10/15/2001"] }
		]};
var myGrid;
function doOnLoad(){
	myGrid = new dhtmlXGridObject('gridbox');
	myGrid.setImagePath("bower_components/dhtmlx/imgs");
	myGrid.setHeader("Sales, Book Title, Author");
	myGrid.setInitWidths("70,250,*");
	myGrid.setColAlign("right,left,left");
	myGrid.setColTypes("dyn,ed,ed");
	myGrid.setColSorting("int,str,str");
	myGrid.init();
	myGrid.parse(data,"json");  
}
</script>
	<div id="gridbox" style="width:100%; height:250px; background-color:green;"></div>
	<br>
	<a href="javascript:void(0)" onclick='myGrid.clearAll();alert("old data cleared\nloading new one..."); myGrid.parse(data,"json")'>Reload from JSON object</a><br/>
</body>

<!-- jQuery -->
<script src="bower_components/jquery/dist/jquery.min.js" ></script>
<script src="bower_components/angular/angular.js" ></script>

<!-- Bootstrap 3.3.6 -->
<script src="static/scripts/AdminLTE2/bootstrap/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="static/scripts/AdminLTE2/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="static/scripts/AdminLTE2/dist/js/app.min.js"></script>
<!-- Sparkline -->
<script src="static/scripts/AdminLTE2/plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="static/scripts/AdminLTE2/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="static/scripts/AdminLTE2/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- SlimScroll 1.3.0 -->
<script src="static/scripts/AdminLTE2/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- ChartJS 1.0.1 -->
<script src="static/scripts/AdminLTE2/plugins/chartjs/Chart.min.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<%-- <script src="<%=root %>/static/scripts/AdminLTE2/dist/js/pages/dashboard2.js"></script> --%>
<!-- AdminLTE for demo purposes -->
<script src="static/scripts/AdminLTE2/dist/js/demo.js"></script>

<!-- Angular -->
<script src="bower_components/angular-route/angular-route.js" ></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js" ></script>
<script src="bower_components/angular-ui-switch/angular-ui-switch.min.js" ></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js" ></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js" ></script>

<!-- bower:js -->
<script src="bower_components/dhtmlx/dhtmlx.js"></script>
<script src="bower_components/angular-highlightjs/build/angular-highlightjs.js"></script>
<script src="bower_components/angular-resource/angular-resource.js" ></script>
<!-- endbower -->

<!-- Main Controller -->
<script src="static/scripts/main.js"></script>

<!-- Index Controller -->
<script src="static/scripts/index/indexCtrl.js"></script>

<!-- ProducePlan Controller -->
<script src="static/scripts/produceplan/produceplanCtrl.js"></script>

<!-- Dhtmlx Directive  -->
<script src="components/dhtmlx/directives/layout.js"></script>
<script src="components/dhtmlx/directives/windows.js"></script>
<script src="components/dhtmlx/directives/tabbar.js"></script>
<script src="components/dhtmlx/directives/tree.js"></script>
<script src="components/dhtmlx/directives/grid.js"></script>
<script src="components/dhtmlx/directives/popup.js"></script>
<script src="components/dhtmlx/directives/menu.js"></script>
<script src="components/dhtmlx/directives/message.js"></script>
<script src="components/dhtmlx/directives/chart.js"></script>
<script src="components/dhtmlx/directives/form.js"></script>

<script src="components/dhtmlx/factories/utils.js"></script>

</html>
